<template>
  <div class="demo-container">
    <h2>ConfirmButton 组件演示</h2>

    <div class="demo-section">
      <h3>基础用法</h3>
      <confirm-button @confirm="handleBasicConfirm">删除</confirm-button>
    </div>

    <div class="demo-section">
      <h3>自定义配置</h3>
      <confirm-button
        text="删除用户"
        confirm-text="确定要删除这个用户吗？"
        type="danger"
        size="small"
        @confirm="handleDeleteUser"
      />
    </div>

    <div class="demo-section">
      <h3>不同按钮类型</h3>
      <confirm-button
        text="重置"
        confirm-text="确定要重置吗？"
        type="warning"
        @confirm="handleReset"
      />
      <confirm-button
        text="发布"
        confirm-text="确定要发布吗？"
        type="success"
        @confirm="handlePublish"
      />
    </div>

    <div class="demo-section">
      <h3>自定义超时时间</h3>
      <confirm-button
        text="格式化"
        confirm-text="确定要格式化吗？"
        :confirm-timeout="10000"
        @confirm="handleFormat"
      />
      <span class="tip">（10秒后自动恢复）</span>
    </div>

    <div class="demo-section">
      <h3>在表格中使用</h3>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <confirm-button size="small" type="danger" text="删除" @confirm="deleteRow(row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import ConfirmButton from './index.vue';

// 模拟表格数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com'
  },
  {
    id: 2,
    name: '李四',
    email: 'lisi@example.com'
  },
  {
    id: 3,
    name: '王五',
    email: 'wangwu@example.com'
  }
]);

// 基础确认
const handleBasicConfirm = () => {
  ElMessage.success('基础删除操作已确认');
};

// 删除用户
const handleDeleteUser = () => {
  ElMessage.success('用户删除操作已确认');
};

// 重置操作
const handleReset = () => {
  ElMessage.success('重置操作已确认');
};

// 发布操作
const handlePublish = () => {
  ElMessage.success('发布操作已确认');
};

// 格式化操作
const handleFormat = () => {
  ElMessage.success('格式化操作已确认');
};

// 删除表格行
const deleteRow = (row: any) => {
  const index = tableData.value.findIndex(item => item.id === row.id);
  if (index > -1) {
    tableData.value.splice(index, 1);
    ElMessage.success(`已删除用户：${row.name}`);
  }
};
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20px;

  h2 {
    margin-bottom: 20px;
    color: #303133;
  }

  .demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;

    h3 {
      margin-bottom: 15px;
      color: #606266;
    }

    .tip {
      margin-left: 10px;
      color: #909399;
      font-size: 12px;
    }
  }
}
</style>
